<template>
  <div id="login">
      <div :class="status<1?'main-area':'main-area-reset'" v-show="status==0">
        <el-image class="logonTil" :src="logonTil" fit="fit"></el-image>
        <span class="title">高驰会务</span>
        <div class="underline"></div>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="telephone">
            <el-input v-model="form.telephone" placeholder="请输入手机号码">
              <i slot="prefix" class="el-input__icon el-icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              placeholder="请输入密码"
              @keyup.enter.native="submitLogin">
              <i slot="prefix" class="el-input__icon  el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <div class="userOptions">
            <el-checkbox class="secret-checkbox" v-model="remindSecret">记住密码</el-checkbox>
            <span @click="forgetPwd" class="forget-secret">忘记密码？</span>
          </div>
          <el-button class="login-Btn" size="mini" @click="submitLogin"
          >登录</el-button
          >
        </el-form>
      </div>
      <div :class="status<1?'main-area':'main-area-reset'" v-show="status==1">
        <span class="title forget-title">忘记密码</span>
        <div class="underline"></div>
        <el-form ref="resetForm"  :model="resetForm" :rules="resetRules">
          <el-form-item prop="telephone">
            <el-input v-model="resetForm.telephone" placeholder="请输入手机号码">
              <i slot="prefix" class="el-input__icon el-icon-mobile"></i>
            </el-input>
  </el-form-item>
    <el-form-item prop="code">
            <el-input class="code-input" v-model="resetForm.code" placeholder="验证码">
            <i slot="prefix" class="el-input__icon el-icon-message"></i>
            </el-input>
            <el-button v-if="!timer" class="award-code-Btn" @click="awardCode">获取验证码</el-button>
            <el-button v-else-if="count == 0" class="award-code-Btn"  @click="awardCode" >重新获取</el-button>
            <el-button v-else class="award-code-Btn award-code-Btn-run" disabled  >{{count}}s再获取</el-button>
    </el-form-item>
    <el-form-item prop="password">
            <el-input v-model="resetForm.password" show-password type="password" placeholder="请输入密码 6-16位，由数字、字母、字符组成">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
            <el-input v-model="resetForm.rePassword" show-password type="password" placeholder="请确认密码">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            </el-form-item>
            <el-button class="confirm-Btn" size="mini" @click="confirm">确定</el-button>
            <span class="back-text" @click="status=0">已想起密码，返回登录</span>
            </el-form>
            </div>
            <div :class="status<1?'main-area':'main-area-reset'" v-show="status==2">
            <span class="title forget-title">初次登陆，请设置密码</span>
    <div class="underline"></div>
            <el-form ref="initForm"  :model="initForm" :rules="initRules">
            <el-form-item prop="password" >
            <el-input v-model="initForm.password" type="password" placeholder="请输入密码 6-16位，由数字、字母、字符组成">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
            <el-input v-model="initForm.rePassword" type="password" placeholder="请确认密码">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            </el-form-item>
            <el-button class="confirm-Btn" size="mini" @click="confirmInitLogon">确定</el-button>
            </el-form>
            </div>
            <!-- <div>&nbsp;</div>
    <transition name="el-zoom-in-center">
            <h1 v-show="timePass > 500" class="align-center">与燕科技前端通用框架 v1.0</h1>
    </transition>
    <transition name="el-zoom-in-center">
            <h2 v-show="timePass > 1000" class="align-center">by Zoomze</h2>
    </transition> -->
    </div>
    <!-- <transition name="el-zoom-in-bottom">
            <div class="align-center" v-show="timePass > 2000">
            <el-button type="primary" @click="submitLogin" size="large">立即体验</el-button>
            </div>
            </transition> -->
</template>

<script>
export default {
  data () {
    let validatorPassword = (rule, value, callback) => {
      if (this.$common.chineseChar.test(value) || this.$common.space.test(value)) {
        return callback(new Error('密码由数字、字母、字符组成'))
      } else {
        callback()
      }
    }
    let validatorRePassword = (rule, value, callback) => {
      if (value != this.resetForm.password) {
        return callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    let validatorinitRePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入确认密码'))
      } else if (this.$common.chineseChar.test(value) || this.$common.space.test(value)) {
        return callback(new Error('密码由数字、字母、字符组成'))
      } else if (value !== this.initForm.password) {
        return callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      logonTil: require('../assets/imgs/logonTitl.png'),
      timer: null, // 定时器
      count: null, // 发送验证码显示的秒s
      timePass: 0,
      form: {
        telephone: '',
        password: ''
      },
      resetForm: {
        telephone: '',
        code: '',
        password: '',
        rePassword: ''
      },
      initForm: {
        password: '',
        rePassword: ''
      },
      initRules: {
        rePassword: [
          { validator: validatorinitRePassword, trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度在6-16位', trigger: 'blur' },
          { validator: validatorPassword, trigger: 'blur' }]
      },
      rules: {
        telephone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: this.$common.mobileNum, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度在6-16位', trigger: 'blur' },
          { validator: validatorPassword, trigger: 'blur' }]
      },
      resetRules: {
        telephone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: this.$common.mobileNum, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度在6-16位', trigger: 'blur' },
          { validator: validatorPassword, trigger: 'blur' }
        ],
        rePassword: [{ required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatorRePassword, trigger: 'blur' }]
      },
      status: 0, // 0登录 1忘记密码 2初始登录
      remindSecret: false // 记住密码
    }
  },
  created () {
    this.readCookie()
  },
  mounted () {
    setInterval(_ => {
      this.timePass += 100
    }, 100)
  },
  methods: {
    handleReset2 () {
      this.$refs.loginForm.resetFields()
    },
    /**
     * 登录
     */
    submitLogin () {
      this.$refs.form.validate(valid => {
        if (valid) {
          let config = {
            url: `meeting/admin_login/adminLogin`,
            method: 'POST',
            data: {
              tel: this.form.telephone,
              pwd: this.form.password
            }
          }
          this.$axios(config).then(res => {
            // 登录成功
            if (res.code === 200) {
              if(this.remindSecret) {
                this.$cookies.set('admin_tel', this.form.telephone)
                this.$cookies.set('password', this.form.password)
              } else {
                this.$cookies.remove('admin_tel')
                this.$cookies.remove('password')
              }
              sessionStorage.setItem('token', res.data)
              sessionStorage.setItem('admin_tel', this.form.telephone)
              sessionStorage.setItem('admin_id', res.extra.admin_id)
              sessionStorage.setItem('user_name', res.extra.username)
              sessionStorage.setItem('icon', res.extra.icon)
              sessionStorage.setItem('extra', res.extra)
              sessionStorage.setItem('type', JSON.stringify(res.add_add_extra) || 2)
              // 根据用户类型决定显示模式
              sessionStorage.setItem('showMode', res.add_add_extra == 0 ? 'dashboard' : 'nav')
              sessionStorage.setItem('typeList', JSON.stringify(res.add_add_add_extra) || '[]')
              this.$store.commit('saveUserData', JSON.stringify({
                admin_tel: this.form.telephone, token: res.data,
                admin_id: res.extra.admin_id,
                user_name: res.extra.username,
                icon: res.extra.icon}))
              this.$message.success('登录成功')
              this.$router.push({ name: 'dashboard' })
            }
          }).catch(err => {
            // 首次登录
            if (err.code === 205) {
              this.$nextTick(_ => {
                this.$refs.form.clearValidate()
              })
              sessionStorage.setItem('admin_tel', this.form.telephone)
              this.status = 2
              this.$refs.initForm.resetFields()
            } else {
              this.$message.error(err.msg)
            }
          })
        }
      })
    },
    /**
     *忘记密码
     */
    forgetPwd () {
      this.$refs.form.clearValidate()
      this.status = 1
      this.$refs.resetForm.resetFields()
    },
    /**
     * 确定重设密码
     */
    confirm () {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          let config = {
            url: 'meeting/admin_login/setPassword',
            method: 'POST',
            data: {
              tel: this.resetForm.telephone,
              pwd: this.resetForm.rePassword,
              code: this.resetForm.code
            }
          }
          this.$axios(config).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.status = 0
              this.$refs.form.resetFields()
            }
          }).catch(err => {
            this.$message.error(err.msg)
          })
        }
      })
    },
    /**
     * 获取验证码
     */
    awardCode () {
      this.$refs.resetForm.validateField('telephone', valid => {
        if (!valid) {
          this.timer = null
          const TIME_COUNT = 60
          this.count = TIME_COUNT
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              clearInterval(this.timer)
            }
          }, 1000)
          let config = {
            url: 'meeting/admin_login/getCode',
            method: 'POST',
            data: {
              tel: this.resetForm.telephone
            }
          }
          this.$axios(config).then(res => {
            if (res.code === 200) {
              this.$message.success('发送成功')
            }
          }).catch(err => {
            this.$message.error(err.mag)

          })
        }
      })
    },
    /**
     * 确认初始化登录
     */
    confirmInitLogon () {
      this.$refs.initForm.validate(valid => {
        if (valid) {
          let config = {
            url: 'meeting/admin_login/setFirstPassword',
            method: 'POST',
            data: {
              tel: sessionStorage.getItem('admin_tel'),
              pwd: this.initForm.rePassword
            }
          }
          this.$axios(config).then(res => {
            if (res.code === 200) {
              sessionStorage.setItem('admin_tel', this.form.telephone)
              sessionStorage.setItem('token', res.data)
              sessionStorage.setItem('extra', res.extra)
              sessionStorage.setItem('admin_id', res.extra.admin_id)
              sessionStorage.setItem('user_name', res.extra.username)
              sessionStorage.setItem('icon', res.extra.icon)
              sessionStorage.setItem('type', JSON.stringify(res.add_add_extra) || 2)
              // 根据用户类型决定显示模式
              sessionStorage.setItem('showMode', res.add_add_extra == 0 ? 'dashboard' : 'nav')
              sessionStorage.setItem('typeList', JSON.stringify(res.add_add_add_extra) || '[]')
              // this.$axios.defaults.headers.common['token'] = res.data
              this.$store.commit('saveUserData', JSON.stringify({
                admin_tel: this.form.telephone,
                 token: res.data,
                 admin_id: res.extra.admin_id,
                  user_name: res.extra.username,
                icon: res.extra.icon}))
              this.$router.push({ name: 'dashboard' })
              this.$message.success('初始成功')
            }
          }).catch(err => {
            if (err.code === -1008) {
              this.$message.error('设置失败，请输入新密码')
            }
          })
        }
      })
    },
    /*
    *@desc 读取cookie
     */
    readCookie () {
      if (this.$cookies.get('admin_tel') && this.$cookies.get('password')) {
        this.form.telephone = this.$cookies.get('admin_tel')
        this.form.password = this.$cookies.get('password')
        this.remindSecret = true
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
<style lang="less">
@--color-white: #fff;
@text-black-color: #333333;
@text-gray-color: #999999;
#login {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  background: url("../assets/imgs/logonBg.png") no-repeat;
  background-size: 100% 100%;
  align-items: center;
  justify-content: center;
  .main-area,.main-area-reset {
    width: 450px;
    height: 530px;
    border-radius: 5px;
    /*box-shadow:0px 0px 30px 0px rgba(0,0,0,0.16);*/
    &.main-area-reset{
      height: 565px;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: @--color-white;
    .logonTil {
      width: 48px;
      height: 48px;
      margin-top: 73px;
    }
    .title {
      font-size: 24px;
      margin-top: 7px;
    }
    .forget-title{
      color: #0E82EB;
      margin-top: 94px;
    }
    .underline {
      width: 51px;
      height: 1px;
      margin-top: 15px;
      border-top: solid #d6d6d6 2px;
    }
    .el-form {
      margin-top: 42px;
      .el-form-item {
        width: 350px;
        /*height: 45px;*/
        margin-bottom: 20px;
      }
    }
    .userOptions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: @text-gray-color;
      .secret-checkbox {
        color: @text-gray-color;
        font-weight: normal;
      }
    }
    .login-Btn,.confirm-Btn{
      width: 350px;
      height: 40px;
      background: linear-gradient(
        to right,
        rgba(14, 130, 235, 0.61),
        rgba(14, 130, 235, 1)
      );
      border: none;
      font-size: 14px;
      margin-top: 57px;
      color: @--color-white;
      font-weight: 400;
      box-shadow:1px 2px 10px 0px rgba(49,145,238,0.25);
    }
      .back-text{
          letter-spacing: 2px;
          cursor: pointer;
          margin-top: 10px;
          text-align: center;
          display: block;
          font-size: 14px;
          color: #999999;
      }
    .confirm-Btn{
      margin-top: 40px;
    }
    .code-input{
      width: 258px;
    }
    .award-code-Btn,.award-code-Btn-run{
      background-color: #0E82EB;
      border-color: #0E82EB;
      width: 92px;
      padding: 12px;
      color: @--color-white;
    }
    .award-code-Btn-run{
      background-color: #CACACA;
      border-color: #CACACA;
    }
    .forget-secret{
      cursor: pointer;
    }
  }
}
</style>
